<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>合同新的详情页</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--&lt;!&ndash; Font Awesome &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--&lt;!&ndash; Ionicons &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>
    <style>
        .jiaobiao3 {
            position: relative;
        }

        .jiaobiao3 i {
            display: block;
            width: 6px;
            height: 6px;
            background: url("/dist/img/newLog3.png");
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .table-my-box {
            padding: 10px 15px;
            background: #f7f8fa;
        }

        .table-my {
            width: 100%;
        }

        .table-my .title {
            width: 80px;
            text-align: center;
        }

        .table-my .value {
            padding: 5px 0;
        }

        label {
            margin: 0;
            margin-right: 10px;
            font-weight: normal;
        }

        input[type=radio] {
            float: left;
            margin-top: 3px !important;
            margin-right: 2px !important;
            height: 15px;
            border-radius: 0;
        }

        .form-control {
            border-radius: 0;
            box-shadow: none;
            border-color: #d2d6de;
            width: 389px;
        }

        .webuploader-pick {
            background: url(/dist/img/fjT1.png) no-repeat 5px center;
            padding: 0 4px;
            height: 29px;
            line-height: 29px;
            padding-left: 15px;
            margin: 0 auto;
            width: 45px;
            margin-top: 1px;
            border-radius: 4px;
            display: block;
            color: #2a8cec;
        }

        .webuploader-pick-hover {
            color: #fff !important;
            background: url(/dist/img/fjT2.png) no-repeat 5px center;
            background-color: #0F6099;

        }

        table td.td-tanZongStyle-line span, table td.td-tanZongStyle-line div.wyui-autocomplete-panel {
            display: none;

        }

        .td-tanZongStyle-line input {
            box-shadow: inset 1px 1px 4px #333;
            padding-left: 4px;
            height: 34px;
            line-height: 34px;
            width: 389px;
            color: #2a8cec;
            border: 1px solid rgb(238, 238, 238);

        }

        .td-tanZongStyle-line {
            height: 45px;
        }

        .td-tanZongStyle-line textarea {
            box-shadow: inset 1px 1px 4px #333;
            display: block;
        }

        .td-tanZongStyle-line span {
            padding-left: 4px !important;
        }

        .table-detail td.td-tanZongStyle-line {
            height: 100% !important;
            padding: 1px !important;

        }

        .td-tanZongStyle-line select {
            box-shadow: inset 1px 1px 4px #333;
            padding-left: 4px;
            height: 34px;
            line-height: 34px;
            width: 389px;
            color: #2a8cec;
            box-shadow: inset 1px 1px 4px #333;
            padding-left: 4px !important;
            border: 1px solid rgb(238, 238, 238);
        }

        .td-box {
            float: left;
            margin-left: 20px;
            border: 1px solid #cbcbcb;
        }
    </style>
</head>
<body>
<!-- Content Header (Page header) -->
<section class="content" id="app">
    <div class="table-my-box">
        <table cellspacing="0" class="table-my">
            <tbody>
            <tr>
                <td class="title" style="height: auto;">选择公司</td>
                <td class="td-tanZongStyle-line">
                    <div class="td-box">
                        <select v-model="companyId" v-if="pageType!='look'" id="companyId">
                            <option value=""></option>
                            <option v-for="(item,i) in companyList" :value="item.id">
                                {{item.allName?item.allName:item.name}}
                            </option>
                        </select>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="title" style="height: auto;">区域经理</td>
                <td class="td-tanZongStyle-line">
                    <div class="td-box">
                        <input placeholder="请输入区域经理名称" type="text" autocomplete="off" id="regionManagerName"
                               :companyId="companyId"
                               v-model="regionManagerName" v-on:click.stop="inputFocus('regionManagerName')"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="title" style="height: auto;">合同类型</td>
                <td class="td-tanZongStyle-line">
                    <div class="td-box">
                        <select v-model="contractType">
                            <option value=""></option>
                            <option value="1">新机合同</option>
                            <option value="2">旧机合同</option>

                        </select>
                    </div>
                </td>
            </tr>
            <template v-if="contractType==1">
                <tr>
                    <td class="title" style="height: auto;">付款类型</td>
                    <td class="td-tanZongStyle-line">
                        <div class="td-box">
                            <select v-model="buyType">
                                <option value=""></option>
                                <option value="全款">全款</option>
                                <option value="内部分期">内部分期</option>
                                <option value="融资租赁">融资租赁</option>
                                <option value="融资租赁打包">融资租赁打包</option>
                            </select>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="title" style="height: auto;">是否置换</td>
                    <td class="td-tanZongStyle-line">
                        <div class="td-box">
                            <select v-model="zhihuan">
                                <option value=""></option>
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="title">首付是否垫款</td>
                    <td class="td-tanZongStyle-line">
                        <div class="td-box">
                            <select v-model="diankuan">
                                <option value=""></option>
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select>
                        </div>
                    </td>
                </tr>
            </template>
            <!--<template v-if="buyType=='融资租赁打包'">-->
                <!--<tr>-->
                    <!--<td class="title" style="height: auto;">还款方式</td>-->
                    <!--<td class="td-tanZongStyle-line">-->
                        <!--<div class="td-box">-->
                            <!--<select v-model="repaymentType">-->
                                <!--<option value=""></option>-->
                                <!--<option value="月还款">月还款</option>-->
                                <!--<option value="季度还款">季度还款</option>-->
                            <!--</select>-->
                        <!--</div>-->
                    <!--</td>-->
                <!--</tr>-->
            <!--</template>-->
            <template v-if="contractType==2">
                <tr>
                    <td class="title" style="height: auto;">是否质保</td>
                    <td class="td-tanZongStyle-line">
                        <div class="td-box">
                            <select v-model="haveWarranty">
                                <option value=""></option>
                                <option value="0">否</option>
                                <option value="1">是</option>
                            </select>
                        </div>
                    </td>
                </tr>
            </template>

            </tbody>
        </table>
        <div class="form-group text-center" style="width: 493px">
            <input type="button" id="btnDraft" value="制作" class="btn oaBtn btn-sm" style="margin-top: 5px;"
                   @click="createDetail">
        </div>
    </div>
</section>

<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>

<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=558d0414"></script>
<script src="Template.js?t=42e28def"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script>
    $(function () {
        $("body").on("click", ".selectModel", function (e) {
            if ($(".model-picker-dropdown").is(":hidden")) {
                $(".model-picker-dropdown").css({
                    "width": $(this).outerWidth() + "px",
                    "left": $(this).offset().left,
                    "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                }).show();
                e.stopPropagation();
            } else {
                $(".model-picker-dropdown").hide();
            }
        });
        $("body").on("click", ".model-select-tab a", function (e) {
            $(this).parent().find("a").removeClass("active");
            $(this).addClass("active");
            var boxName = $(this).attr("data-count");
            $(".model-select").hide();
            $(".model-select-content" + " ." + boxName).show();
        });
        $("body").on("click", ".model-select  a", function (e) {
            if ($(this).hasClass("active")) {
                return false;
            }
            $(this).parent().find("a").removeClass("active");
            var id = $(this).attr("attr-id");
            $(this).addClass("active");
            var val = $(this).text();
            if ($(this).parents(".model-select").hasClass("type")) {
                $(".model-select-tab a").removeClass("active");
                $(".model-select-tab a[data-count=brand]").addClass("active");
                $(".model-select").hide();
                app.contract.main.province = val;
                app.contract.main.city = '';
                app.getCity(id);
                $(".model-select-content .brand").show();
            } else if ($(this).parents(".model-select").hasClass("brand")) {
                app.contract.main.city = val;
                $(".model-picker-dropdown").hide();
            }
        })
        $("body").on("click", ".model-picker-dropdown", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".model-picker-dropdown").hide();
        });
    });
</script>
<script>
    var api = frameElement.api;

    var app = new Vue({
        el: '#app',
        data: {
            pageType: $.wyui.page.urlParams.pageType ? $.wyui.page.urlParams.pageType : 'add',//页面类型
            brandName: "利勃海尔",
            buyType: "",
            repaymentType: '',//还款方式
            zhihuan: '',
            diankuan: '',
            id: $.wyui.page.urlParams.id ? $.wyui.page.urlParams.id : '',
            companyList: [],
            companyId: '',
            contractType: '',
            regionManagerName: '',
            regionManagerId: '',
            daiShouDaiFu: '',
            haveWarranty: '',
        },
        methods: {
            inputFocus: function (id) {
                $("#" + id).focus();
            }
            ,
            getToday: function () {
                var that = this;
                $.wyui.postMethod("/system/getCurrentTime.json", {}, function (now) {
                    console.log(now.dateTime);
                    var d = new Date(now.dateTime);
                    var hour = d.getHours();
                    var minute = d.getMinutes();
                    var second = d.getSeconds();
                    var month = d.getMonth() + 1;
                    var year = d.getFullYear();
                    var day = d.getDate();
                    if (hour < 10) {
                        hour = "0" + hour;
                    }
                    if (minute < 10) {
                        minute = "0" + minute;
                    }
                    if (month < 10) {
                        month = "0" + month;
                    }
                    if (day < 10) {
                        day = "0" + day;
                    }
                    if (year < 10) {
                        year = "0" + year;
                    }
                    console.log(year + "年" + month + "月" + day + "日")
                    that.today = year + "年" + month + "月" + day + "日";
                    console.log(that.today);
                    return year + "年" + month + "月" + day + "日";
                });
            },
            createDetail: function () {
                var that = this;
                if (that.companyId == "") {
                    alert("公司为必选项");
                    return false;
                }
                if (!that.regionManagerId || that.regionManagerId == "") {
                    alert("区域经理为必填项");
                    return false;
                }
                if (!that.contractType || that.contractType == "") {
                    alert("合同类型为必填项");
                    return false;
                }
                if (that.contractType == '2') {
                    that.buyType = "全款";
                    that.zhihuan = "0";
                    that.diankuan = "0";
                    that.daiShouDaiFu = "0";
                    if (!that.haveWarranty || that.haveWarranty == "") {
                        alert("是否质保为必填项");
                        return false;
                    }
                } else {
                    if (!that.buyType || that.contractType == "") {
                        alert("付款类型为必填项");
                        return false;
                    }
                    /*  if(that.buyType == '融资租赁打包'){
                          that.daiShouDaiFu=1;
                      }*/
//                    if (that.buyType == '融资租赁' || that.buyType == '融资租赁打包') {
//                        if (that.daiShouDaiFu == "") {
//                            alert("融资付款方式为必选项");
//                            return false;
//                        }
//                    }
//                    if (that.buyType == '融资租赁打包') {
//                        if (that.repaymentType == "") {
//                            alert("还款方式为必选项");
//                            return false;
//                        }
//                    }
                    if (that.zhihuan == "") {
                        alert("是否置换为必选项");
                        return false;
                    }
                    if (that.diankuan == "") {
                        alert("是否垫款为必选项");
                        return false;
                    }
                    if (that.buyType == '全款' || that.buyType == '内部分期') {
                        that.daiShouDaiFu = '0';
                    }
                    that.haveWarranty = '0';
                }
                top.closeTabByPageId("htxq");
                top.addTabs({
                    id: 'htxq',
                    title: '合同详情',
                    close: true,
                    url: 'apply/contractWyp/detail_new.html?pageType=' + that.pageType + '&buyType=' + that.buyType + "&zhihuan=" + that.zhihuan + "&diankuan=" + that.diankuan + '&companyId=' + that.companyId + '&regionManagerName=' + that.regionManagerName + '&regionManagerId=' + that.regionManagerId + '&contractType=' + that.contractType + '&daiShouDaiFu=' + that.daiShouDaiFu + '&repaymentType=' + that.repaymentType + '&openType=top' + '&haveWarranty=' + that.haveWarranty,
                });
            }

        }
        ,
        mounted: function () {
            var that = this;
            //获取公司列表
            $.wyui.postMethod("/company/getCompanyByUserId.json", {userId: getCurrentUser().id}, function (data) {
                that.companyList = data;
//                if (data.length > 0) {
//                    that.companyId = data[0].id
//                }
            });
        }
    });

</script>
<script>
    $("#regionManagerName").autoComplete({
        url: server.ip + urlConfig.contractWyp.getRegionManagerByUserId,
        render: function (users, panel) {
            for (var i = 0; i < users.length; i++) {
                $("<li></li>").data("autoComplete",
                    users[i]).html("<a>" + users[i].name + "&nbsp;&nbsp;&nbsp;" +
                    "(" + "&nbsp;" + users[i].companyName + "-" + users[i].departName + "-" + users[i].roleName + "&nbsp;" + ") " + "</a>")
                    .appendTo(panel);
            }
        },
        selected: function (user) {
            app.regionManagerId = user.id;
            app.regionManagerName = user.name;
            return false;
        },
        extraParams: {createUserId: getCurrentUser().id},
        height: 210,
        width:
            420
    })
    ;
</script>
</body>
</html>
